<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #p1 {
            width: 200px;
            height: 200px;
            background-color: #56a5f1;
        }
    </style>
</head>
<body>
    <p id="p1" title="ppppp">
        <span>城市套路深，我要回农村</span>
    </p>
    <script>
        // 我不是针对谁，我是说在座的各位都是
        // 富一代
        // document.write('<h1>胖祥</h1>')
        var pEl = document.querySelector('#p1');
        // innerHTML 元素内部的html结构--不仅可以获取文本，也可以拿到标签
        console.log(pEl.innerHTML);
        // innerText 只有文本，没有标签。如果通过innerText赋值，带有标签的内容也会显示为文字而不是标签
        console.log(pEl.innerText);
        pEl.innerText = '<mark>4-29 5:29</mark>';
        // innerHTML或者innerTEXT带有等号时可以赋值，没有等号时就是获取值
        // console.log(pEl.title);
        pEl.title = 'QWER'; // 原生属性
        // 通过dom修改css
        pEl.style.width = '500px';
        // 类似backgroundColor这样多个单词的属性，需要用小驼峰的形式表示
        pEl.style.backgroundColor = 'red'
    </script>
</body>
</html>